<!-- eslint-disable vue/multi-word-component-names -->
<!-- eslint-disable vue/no-mutating-props -->
<template>
    <el-form size="small" inline label-suffix=" :" class="topForm">
        <el-form-item label="控制器">
            <el-select v-model="config.controller">
                <template v-for="im, ix in gongshi.arr1" :key="ix">
                    <el-option :label="im" :value="ix" />
                </template>
            </el-select>
        </el-form-item>
        <!-- <el-form-item label="形式">
            <el-select v-model="config.form">
                <template v-for="im, ix in gongshi.arr2" :key="ix">
                    <el-option :label="im" :value="ix" />
                </template>
            </el-select>
        </el-form-item> -->
    </el-form>
    <div class="tem">
        <!-- <div class="temInline">
             <labelArea label="时域">
                <el-radio-group v-model="config.radio" size="small">
                    <el-radio :label="1">连续时间</el-radio>
                    <el-radio :label="2">离散时间</el-radio>
                </el-radio-group>
            </labelArea>
            <labelArea label="离散时间设置">
                <el-form size="small" label-suffix=" :">
                    <el-form-item v-if="config.radio == 2">
                        <ctcheckbox v-model="data.ZeroCross">PID 控制器位于条件执行子系统内</ctcheckbox>
                    </el-form-item>
                    <el-form-item label="采样时间（-1 表示继承）">
                        <el-input v-model="data.time" placeholder=""></el-input>
                    </el-form-item>
                    <FoldBox v-show="config.radio == 2 && config.controller != 3" title="积分器和滤波器方法：">
                        <el-form-item v-if="[0, 1, 4].includes(config.controller)" label="积分器方法">
                            <el-select v-model="data.type">
                                <el-option label="前向欧拉" value="rect"></el-option>
                                <el-option label="后向欧拉" value="circle"></el-option>
                                <el-option label="梯形" value="circle"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="[0, 2].includes(config.controller)" label="滤波器方法">
                            <el-select v-model="data.type">
                                <el-option label="前向欧拉" value="rect"></el-option>
                                <el-option label="后向欧拉" value="circle"></el-option>
                                <el-option label="梯形" value="circle"></el-option>
                            </el-select>
                        </el-form-item>
                    </FoldBox>
                </el-form>
            </labelArea>
        </div> -->
        <FoldBox :show="1" title="补偿器公式">
            <vue-latex :expression="getLatex()" display-mode />
        </FoldBox>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const { data, config } = defineProps(['data', 'config'])



const gongshi = {
    arr1: ['PID', 'PI', 'PD', 'P', 'I', 'D'],
    arr2: ['理想', '并行'],
    kus: [
        [
            'P\\left(1+I\\dfrac{1}{s}+D\\dfrac{N}{1+N\\dfrac{1}{s}}\\right)',
            'P\\left(1+I\\dfrac{1}{s}\\right)',
            'P\\left(1+D\\dfrac{N}{1+N\\dfrac{1}{s}}\\right)',
            'P',
            'I\\dfrac{1}{s}'
        ],
        [
            'P+I\\dfrac{1}{s}+D\\dfrac{N}{1+N\\dfrac{1}{s}}',
            'P+I\\dfrac{1}{s}',
            'P+D\\dfrac{N}{1+N\\dfrac{1}{s}}',
            'P',
            'I\\dfrac{1}{s}'
        ]
    ]
}

function getLatex() {
    return gongshi.kus[config.form][config.controller]
}
</script>


<style scoped>
.tem {
    margin: 10px 0 15px;

    .temInline {
        display: flex;
        justify-content: space-between;

        &>>>labelArea {
            margin: 0;
            width: calc(50% - 5px);
            display: flex;
            align-items: center;

            .el-radio-group {
                display: flex;
                flex-direction: column;
                align-items: start;
                justify-content: space-evenly;
            }
        }
    }
}
</style>